<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- 网站说明 -->
    <meta name="description"
        content="品优购商城-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
    <!-- 关键字 -->
    <meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />
    <!-- 引入动画 -->
    <link rel="stylesheet" href="./css/animate.min.css">
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2664437_nfo9hbdv05i.css">
    <!-- 引入初始化样式-->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入index样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <style>
        body {
            height: 3000px;

        }

        /* 全局导航的css */
        .nav_bar {
            position: absolute;
            width: 58px;

            top: 678px;
            left: 50%;
            margin-left: 568px;
            text-align: center;
            font-size: 14px;
            color: #333;
            background-color: #ccc;
            z-index: 9999;
        }

        .nav_bar li {

            position: relative;
            padding-top: 11px;
            /* width: 58px; */
            height: 60px;
            box-sizing: border-box;
        }

        .nav_bar li:hover {
            background-color: #c81623;
            color: #fff;
        }

        .nav_bar li:hover>i {
            background-color: #c81623;
        }

        .nav_bar i.spacer {
            position: absolute;
            width: 40px;
            height: 1px;
            top: 58px;
            left: 9px;
            background-color: #999;
        }

        .nav_bar i.iconfont {
            display: block;
            font-size: 26px;
        }

        /* 导航栏选中状态的颜色 */
        .currentnav {
            color: #e1251b;
        }

        .nav_bar li.returntop {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 导航条 针对body定位，脱离文档流-->
    <div class="nav_bar">
        <ul>
            <li class="currentnav">今日<br>推荐 <i class="spacer"></i></li>
            <!-- <li class="spacer"></li> -->
            <li>家用<br>电器 <i class="spacer"></i></li>

            <li>手机<br>通讯 <i class="spacer"></i></li>

            <li>电脑<br>办公 <i class="spacer"></i></li>

            <li><i class="iconfont icon-fuwupingjia-kefu-select-copy"></i>客服 <i class="spacer"></i></li>

            <li class="returntop animated "><i class="iconfont icon-up1"></i> 顶部 <i class="spacer"></i></li>

        </ul>
    </div>
    <!-- 顶部通栏的 -->
    <div id="shortcut">
        <div class="navigation w">
            <ul class="fl">
                <li><span>品优购欢迎您！<a href="javascript:;"> 请登录</a></span></li>
                <li class="register"><a href="./register.html">免费注册</a></li>
            </ul>
            <ul class="fr">

                <li><a href="javascript:;">我的订单</a></li>
                <li class="spacer"></li>
                <li class="myshop"><a href="javascript:;">我的品优购<i class="iconfont icon-jiantou"></i></a></li>
                <li class="spacer"></li>
                <li><a href="javascript:;">品优购会员</a></li>
                <li class="spacer"></li>
                <li><a href="javascript:;">企业采购</a></li>
                <li class="spacer"></li>
                <li class="follow"><a href="javascript:;">关注品优购<i class="iconfont icon-jiantou"></i></a></li>
                <li class="spacer"></li>
                <li class="custom"><a href="javascript:;">客户服务<i class="iconfont icon-jiantou"></i></a></li>
                <li class="spacer"></li>
                <li class="website"><a href="javascript:;">网站导航<i class="iconfont icon-jiantou"></i></a></li>
            </ul>
        </div>
    </div>
    <!-- 头部区域，logo，搜索框 我的购物车 -->
    <header id="header" class="w">
        <div class="logo ">
            <h1 title="品优购商城"><a href="index.html">品优购商城</a></h1>
        </div>
        <div class="search">
            <div class="form">
                <form action="#">
                    <input type="text" class="search_txt" placeholder="1加7plus">
                    <button class="btn">搜索</button>
                </form>
            </div>
            <div class="hotword">
                <ul>
                    <li><a href="javascript:;">优惠购首发</a></li>
                    <li><a href="javascript:;">亿元优惠</a></li>
                    <li><a href="javascript:;">9.9元团购</a></li>
                    <li><a href="javascript:;">每满99减30</a></li>
                    <li><a href="javascript:;">办公用品</a></li>
                    <li><a href="javascript:;">电脑</a></li>
                    <li><a href="javascript:;">通讯</a></li>
                </ul>
            </div>
        </div>
        <div class="cart">
            <i class="iconfont icon-gouwuche"></i>
            <span class="mycart">我的购物车</span>
            <i class="iconfont icon-youjiantoubeifen3"></i>
            <div class="count">8</div>
        </div>
        <!-- 头部---全部商品 -->
        <div class="navitems">
            <div class="allgood fl">
                全部商品分类
            </div>
            <ul class="item fl">
                <li>服装城</li>
                <li>美妆馆</li>
                <li>传智超市</li>
                <li>全球购</li>
                <li>闪购</li>
                <li>团购</li>
                <li>拍卖</li>
                <li>有趣</li>
            </ul>
        </div>
    </header>
    <!-- 内容展示区域 --详细类别区，轮播图，快报 -->
    <div class="content w">
        <div class="content_top">
            <div class="contTop_left fl">
                <ul class="category"><a href="javascript:;"></a>
                    <!-- 这里需要加a标签，加hover事件 -->
                    <li><a href="javascript:;">家用电器</a> <i class="iconfont icon-youjiantoubeifen3"></i></li>
                    <li><a href="category.html">手机</a>、<a href="javascript:;">数码</a>、<a href="javascript:;">通信</a><i
                            class="iconfont icon-youjiantoubeifen3"></i></li>
                    <li><a href="javascript:;">电脑</a>、<a href="javascript:;">办公</a><i
                            class="iconfont icon-youjiantoubeifen3"></i></li>
                    <li><a href="javascript:;">家居</a>、<a href="javascript:;">家具</a>、<a href="javascript:;">家装</a>、<a
                            href="javascript:;">厨具</a><i class="iconfont icon-youjiantoubeifen3"></i></li>
                    <li><a href="javascript:;">男装</a>、<a href="javascript:;">女装</a>、<a href="javascript:;">童装</a>、<a
                            href="javascript:;">内衣</a><i class="iconfont icon-youjiantoubeifen3"></i></li>
                    <li><a href="javascript:;">个户化妆</a>、<a href="javascript:;">清洁用品</a>、<a href="javascript:;">宠物</a><i
                            class="iconfont icon-youjiantoubeifen3"></i></li>
                    <li><a href="javascript:;">鞋靴</a>、<a href="javascript:;">箱包</a>、<a href="javascript:;">珠宝</a>、<a
                            href="javascript:;">奢侈品</a><i class="iconfont icon-youjiantoubeifen3"></i></li>
                    <li><a href="javascript:;">运动户外</a>、<a href="javascript:;">钟表</a><i
                            class="iconfont icon-youjiantoubeifen3"></i></li>
                    <li><a href="javascript:;">汽车</a>、<a href="javascript:;">汽车用品</a><i
                            class="iconfont icon-youjiantoubeifen3"></i></li>
                    <li><a href="javascript:;">母婴</a>、<a href="javascript:;">玩具乐器</a><i
                            class="iconfont icon-youjiantoubeifen3"></i></li>
                    <li><a href="javascript:;">食品</a>、<a href="javascript:;">酒类</a>、<a href="javascript:;">生鲜</a>、<a
                            href="javascript:;">特产</a><i class="iconfont icon-youjiantoubeifen3"></i></li>
                    <li><a href="javascript:;">医药保健</a><i class="iconfont icon-youjiantoubeifen3"></i></li>
                    <li><a href="javascript:;">图书</a>、<a href="javascript:;">音像</a>、<a href="javascript:;">电子书</a><i
                            class="iconfont icon-youjiantoubeifen3"></i></li>
                    <li><a href="javascript:;">彩票</a>、<a href="javascript:;">旅行</a>、<a href="javascript:;">充值</a>、<a
                            href="javascript:;">票务</a><i class="iconfont icon-youjiantoubeifen3"></i></li>
                    <li><a href="javascript:;">理财</a>、<a href="javascript:;">众筹</a>、<a href="javascript:;">白条</a>、<a
                            href="javascript:;">保险</a><i class="iconfont icon-youjiantoubeifen3"></i></li>
                </ul>
            </div>
            <div class="contTop_mid banner fl">
                <div class="btn_left">
                    <i> &lt; </i>
                </div>
                <div class="btn_right">
                    <i> &gt; </i>
                </div>
                <ul class="banner_ul">
                    <li class="lione"><a href="javascript:;"><img src="./upload/banner/focus.jpg" alt=""></a> </li>
                    <li><a href="javascript:;"><img src="./upload/banner/focus1.jpg" alt=""></a></li>
                    <li><a href="javascript:;"><img src="./upload/banner/focus2.jpg" alt=""></a></li>
                    <li><a href="javascript:;"><img src="./upload/banner/focus3.jpg" alt=""></a></li>
                </ul>

                <ol class="banner_ol">
                    <!-- <li class="current"></li>
                    <li></li>
                    <li></li>
                    <li></li> -->
                </ol>
            </div>
            <div class="contTop_right fr">
                <div class="contTop_right_top ">
                    <div class="news">
                        <div class="title">
                            <h3>品优购快报<span class="fr">更多<i class="iconfont icon-youjiantoubeifen3"></i></span></h3>
                        </div>
                        <ul class="items">
                            <li><a href="javascript:;"><span>[特惠]</span>大屏全能型办公本，小新Pro 16</a></li>
                            <li><a href="javascript:;"><span>[公告]</span>污物冲不尽、堵塞、异味？</a></li>
                            <li><a href="javascript:;"><span>[特惠]</span>多油松沙的海鸭蛋黄</a></li>
                            <li><a href="javascript:;"><span>[公告]</span>污物冲不尽、堵塞、</a></li>
                            <li><a href="javascript:;"><span>[特惠]</span>原来搞卫生可以这样简单</a></li>

                        </ul>
                    </div>
                    <div class="service">
                        <ul>
                            <li><a href="javascript:;"><i class="huafei bgi"></i><em>话费</em> </a></li>
                            <li><a href="javascript:;"><i class="huafei bgi"></i><em>机票</em> </a></li>
                            <li><a href="javascript:;"><i class="huafei bgi"></i><em>电影票</em> </a></li>
                            <li><a href="javascript:;"><i class="huafei bgi"></i><em>游戏</em> </a></li>
                            <li><a href="javascript:;"><i class="huafei bgi"></i><em>彩票</em> </a></li>
                            <li><a href="javascript:;"><i class="huafei bgi"></i><em>加油站</em> </a></li>
                            <li><a href="javascript:;"><i class="huafei bgi"></i><em>酒店</em> </a></li>
                            <li><a href="javascript:;"><i class="huafei bgi"></i><em>火车票</em> </a></li>
                            <li><a href="javascript:;"><i class="huafei bgi"></i><em>众筹</em> </a></li>
                            <li><a href="javascript:;"><i class="huafei bgi"></i><em>理财</em> </a></li>
                            <li><a href="javascript:;"><i class="huafei bgi"></i><em>礼品卡</em> </a></li>
                            <li><a href="javascript:;"><i class="huafei bgi"></i><em>白条</em> </a></li>
                        </ul>
                    </div>
                </div>
                <div class="contTop_right_bottom ">
                    <img src="./upload/bargain.png" alt="">
                </div>
            </div>


        </div>
        <div class="content_bottom">
            <div class="title">
                <img src="./images/recom.png" alt="">
            </div>
            <ul class="recommend">
                <li><a href="javascript:;"><img src="./upload/recommom/recom_01.jpg" alt=""></a>
                    <i class="spacer"></i>
                </li>
                <!-- <li class="spacer"></li> -->
                <li><a href="javascript:;"><img src="./upload/recommom/recom_02.jpg" alt=""></a><i class="spacer"></i>
                </li>
                <li><a href="javascript:;"><img src="./upload/recommom/recom_03.jpg" alt=""></a><i class="spacer"></i>
                </li>
                <li><a href="javascript:;"><img src="./upload/recommom/recom_04.jpg" alt=""></a></li>

            </ul>
        </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="guesslove w">
        <h2 class="title">猜你喜欢<span>换一批<i class="iconfont icon-shuaxin"></i></span></h2>
        <div class="lists">
            <ul class="lists_ul">
                <li class="product">
                    <a href="javascript">
                        <div class="productimg"><img src="./upload/love/love1.jpg" alt=""></div>
                        <div class="desc">
                            <p>阳光美包新款单肩包女<br>包时尚子母包四件套女</p>
                            <p><span class="font14">￥</span><i>116.00</i></p>
                        </div>
                    </a>
                </li>
                <li class="product">
                    <a href="javascript">
                        <div class="productimg"><img src="./upload/love/love2.jpg" alt=""></div>
                        <div class="desc">
                            <p>爱仕达 30CM炒锅不粘<br>锅NWG8330E电磁炉炒</p>
                            <p><span class="font14">￥</span><i>99.00</i></p>
                        </div>
                    </a>
                </li>
                <li class="product">
                    <a href="javascript">
                        <div class="productimg"><img src="./upload/love/love14.jpg" alt=""></div>
                        <div class="desc">
                            <p>圣雅罗999银项链<br>女款锁骨链时尚学生</p>
                            <p><span class="font14">￥</span><i>238.00</i></p>
                        </div>
                    </a>
                </li>
                <li class="product">
                    <a href="javascript">
                        <div class="productimg"><img class="deng" src="./upload/love/love27.jpg" alt=""></div>
                        <div class="desc">
                            <p>碧水源净水器<br>家用直饮纳滤净水机</p>
                            <p><span class="font14">￥</span><i>646.00</i></p>
                        </div>
                    </a>
                </li>
                <li class="product">
                    <a href="javascript">
                        <div class="productimg"><img src="./upload/love/love5.jpg" alt=""></div>
                        <div class="desc">
                            <p>三星<br>（G5500）移动联</p>
                            <p><span class="font14">￥</span><i>599.00</i></p>
                        </div>
                    </a>
                </li>
                <li class="product">
                    <a href="javascript">
                        <div class="productimg"><img src="./upload/love/love30.jpg" alt=""></div>
                        <div class="desc">
                            <p>家香味 传承土榨<br> 压榨一级花生油6.18L</p>
                            <p><span class="font14">￥</span><i>116.00</i></p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 电梯层区域，家用电器 -->
    <div class="floor w">
        <div class="floor_one" id="floorone">
            <div class="title">
                <h2 class="fl">家用电器</h2>
                <ul class="fr">
                    <li><a href="javascript:;">热门</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">大家电</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">生活电器</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">厨房电器</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">个护健康</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">应季电器</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">空气/净水</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">新奇特</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">高端电器</a></li>
                </ul>
            </div>
            <div class="product">
                <ul class="product_ul">
                    <li>
                        <ul class="clearfix">
                            <li><a href="javascript:;">节能补贴</a></li>
                            <li><a href="javascript:;">4K电视</a></li>
                            <li><a href="javascript:;">空气净化器</a></li>
                            <li><a href="javascript:;">IH电饭煲</a></li>
                            <li><a href="javascript:;">滚筒洗衣机</a></li>
                            <li><a href="javascript:;">电热水器</a></li>
                        </ul>
                        <a href="javascript:;"><img src="./upload/f1/floor-1-1.png" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="./upload/f1/floor-1-b01.png" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img class="oven" src="./upload/f1/floor-1-2.png" alt=""></a>
                        <a href="javascript:;"><img src="./upload/f1/floor-1-3.png" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="./upload/f1/floor-1-4.png" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img class="aircondi" src="./upload/f1/floor-1-5.png" alt=""></a>
                        <a href="javascript:;"><img src="./upload/f1/floor-1-6.png" alt=""></a>
                    </li>
                </ul>
            </div>
            <div class="brand">
                <ul>
                    <li><a href="javascript:;"><img src="./upload/f1/bottom1.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f1/bottom2.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f1/bottom3.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f1/bottom4.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f1/bottom5.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f1/bottom6.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f1/bottom7.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f1/bottom8.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f1/bottom9.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f1/bottom10.jpg" alt=""><i class="spacer"></i></a>
                    </li>

                </ul>
            </div>
        </div>
        <!-- 电梯层区域，手机通讯 -->
        <div class="floor_one" id="floortwo">
            <div class="title">
                <h2 class="fl">手机通讯</h2>
                <ul class="fr">
                    <li><a href="javascript:;">热门</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">品质优选</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">手机配件</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">新机尝鲜</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">高性价比</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">口碑推荐</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">合约机</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">手机卡</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">店铺精选</a></li>
                </ul>
            </div>
            <div class="product">
                <ul class="product_ul">
                    <li>
                        <ul class="clearfix">
                            <li><a href="javascript:;">手机通信</a></li>
                            <li><a href="javascript:;">以旧换新</a></li>
                            <li><a href="javascript:;">双卡双待</a></li>
                            <li><a href="javascript:;">自营配件</a></li>
                            <li><a href="javascript:;">金属机身</a></li>
                            <li><a href="javascript:;">高清屏</a></li>
                        </ul>
                        <a href="javascript:;"><img src="./upload/f2/f21.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="./upload/f2/f22.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img class="oven" src="./upload/f2/f231.jpg" alt=""></a>
                        <a href="javascript:;"><img src="./upload/f2/f232.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="./upload/f2/f24.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img class="aircondi" src="./upload/f2/f251.jpg" alt=""></a>
                        <a href="javascript:;"><img src="./upload/f2/f252.jpg" alt=""></a>
                    </li>
                </ul>
            </div>
            <div class="brand">
                <ul>
                    <li><a href="javascript:;"><img src="./upload/f2/bottom1.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f2/bottom2.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f2/bottom3.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f2/bottom4.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f2/bottom5.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f2/bottom6.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f2/bottom7.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f2/bottom8.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f2/bottom9.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f2/bottom10.jpg" alt=""><i class="spacer"></i></a>
                    </li>

                </ul>
            </div>
        </div>
        <!-- 电梯层区域，电脑办公 -->
        <div class="floor_one" id="floorthree">
            <div class="title">
                <h2 class="fl">电脑办公</h2>
                <ul class="fr">
                    <li><a href="javascript:;">热门</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">电脑/平板</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">潮流影音</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">智能/外设</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">DIY硬件</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">电竞游戏</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">办公/网络</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">文具电教</a></li>
                    <li class="spacer">|</li>
                    <li><a href="javascript:;">精选配件</a></li>
                </ul>
            </div>
            <div class="product">
                <ul class="product_ul">
                    <li><a href="javascript:;"></a>
                        <ul class="clearfix">
                            <li><a href="javascript:;">SSD硬盘</a></li>
                            <li><a href="javascript:;">显示器</a></li>
                            <li><a href="javascript:;">机械键盘</a></li>
                            <li><a href="javascript:;">台式机</a></li>
                            <li><a href="javascript:;">组装电脑</a></li>
                            <li><a href="javascript:;">配件专区 </a></li>
                        </ul>
                        <a href="javascript:;"><img src="./upload/f3/f31.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="./upload/f3/f32.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img class="oven" src="./upload/f3/f331.jpg" alt=""></a>
                        <a href="javascript:;"><img src="./upload/f3/f332.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="./upload/f3/f34.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img class="aircondi" src="./upload/f3/f351.jpg" alt=""></a>
                        <a href="javascript:;"><img src="./upload/f3/f352.jpg" alt=""></a>
                    </li>
                </ul>
            </div>
            <div class="brand">
                <ul>
                    <li><a href="javascript:;"><img src="./upload/f3/bottom1.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f3/bottom2.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f3/bottom3.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f3/bottom4.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f3/bottom5.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f3/bottom6.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f3/bottom7.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f3/bottom8.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f3/bottom9.jpg" alt=""><i class="spacer"></i></a></li>
                    <li><a href="javascript:;"><img src="./upload/f3/bottom10.jpg" alt=""><i class="spacer"></i></a>
                    </li>

                </ul>
            </div>
        </div>
    </div>

    <!-- 底部通栏区域 -->
    <footer id="footer">
        <div class="footer w">
            <div class="feature">
                <ul>
                    <li><a href="javascript:;">
                            <div class="fl bgimg wow animated fadeInRightBig"></div>
                            <div class="fl">
                                <p>正品保障</p><span>正品保障，提供发票</span>
                            </div>
                        </a>

                    </li>
                    <li><a href="javascript:;">
                            <div class="fl bgimg logistics wow animated fadeInRightBig"></div>
                            <div class="fl">
                                <p>极速物流</p><span>急速物流，急速送达</span>
                            </div>
                        </a>

                    </li>
                    <li><a href="javascript:;">
                            <div class="fl bgimg custom wow animated fadeInDownBig"></div>
                            <div class="fl">
                                <p>无忧售后</p><span>7天无理由退换货</span>
                            </div>
                        </a>

                    </li>
                    <li><a href="javascript:;">
                            <div class="fl bgimg private wow animated fadeInLeftBig"></div>
                            <div class="fl">
                                <p>特色服务</p><span>私人定制家电套餐</span>
                            </div>
                        </a>

                    </li>
                    <li><a href="javascript:;">
                            <div class="fl bgimg help wow animated fadeInLeftBig"></div>
                            <div class="fl">
                                <p>帮助中心</p><span>您的购物指南</span>
                            </div>
                        </a>

                    </li>

                </ul>
            </div>
            <div class="modules clearfix">
                <ul class="modules_ul">
                    <li>
                        <ul>
                            <li><a href="javascript:;">购物指南</a></li>
                            <li><a href="javascript:;">购物流程</a></li>
                            <li><a href="javascript:;">会员介绍</a></li>
                            <li><a href="javascript:;">生活旅行/团购</a></li>
                            <li><a href="javascript:;">常见问题</a></li>
                            <li><a href="javascript:;">大家电</a></li>
                            <li><a href="javascript:;">联系客服</a></li>
                        </ul>
                    </li>
                    <li>
                        <ul>

                            <li><a href="javascript:;">配送方式</a></li>
                            <li><a href="javascript:;">上门自提</a></li>
                            <li><a href="javascript:;">211限时达</a></li>
                            <li><a href="javascript:;">配送服务查询</a></li>
                            <li><a href="javascript:;">配送费收取标准</a></li>
                            <li><a href="javascript:;">海外配送</a></li>
                        </ul>
                    </li>
                    <li>
                        <ul>
                            <li><a href="javascript:;">支付方式</a></li>
                            <li><a href="javascript:;">货到付款</a></li>
                            <li><a href="javascript:;">在线支付</a></li>
                            <li><a href="javascript:;">分期付款</a></li>
                            <li><a href="javascript:;">邮局汇款</a></li>
                            <li><a href="javascript:;">公司转账</a></li>

                        </ul>
                    </li>
                    <li>
                        <ul>
                            <li><a href="javascript:;">售后服务</a></li>
                            <li><a href="javascript:;">售后政策</a></li>
                            <li><a href="javascript:;">价格保护</a></li>
                            <li><a href="javascript:;">退款说明</a></li>
                            <li><a href="javascript:;">返修/退换货</a></li>
                            <li><a href="javascript:;">取消订单</a></li>

                        </ul>
                    </li>
                    <li>
                        <ul>
                            <li><a href="javascript:;">特色服务</a></li>
                            <li><a href="javascript:;">夺宝岛</a></li>
                            <li><a href="javascript:;">DIY装机</a></li>
                            <li><a href="javascript:;">延保服务</a></li>
                            <li><a href="javascript:;">品优购E卡</a></li>
                            <li><a href="javascript:;">品优购通信</a></li>

                        </ul>
                    </li>
                    <li>
                        <ul>
                            <li> <a href="javascript:;">帮助中心</a></li>
                            <li class="wow animated  rotateIn">
                                <a href="javascript:;"><img src="./images/wx_cz.jpg" alt=""></a>
                            </li>
                            <li> <a href="javascript:;">品优购客户端</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="about">
                <p><span>关于我们</span> <span class="spacer">|</span> <span>联系我们</span> <span class="spacer">|</span>
                    <span>联系客服</span> <span class="spacer">|</span> <span>商家入驻</span> <span class="spacer">|</span>
                    <span>营销中心</span> <span class="spacer">|</span>
                    <span>手机品优购</span> <span class="spacer">|</span> <span>友情链接</span> <span class="spacer">|</span>
                    <span>销售联盟</span> <span class="spacer">|</span> <span>品优购社区</span> <span class="spacer">|</span>
                    <span>品优购公益</span>
                    <span class="spacer">|</span> <span>English Site</span> <span class="spacer">|</span> <span>Contact
                        U</span></p>
                <p>地址：<span><i>北京市昌平区建材城西路金燕龙办公楼一层</i></span> 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
                    <br>京ICP备08001421号京公网安备110108007702
                </p>
            </div>
        </div>
    </footer>

    <script src="./js/jquery-1.8.3.min.js"></script>
    <script src="./js/wow.min.js"></script>
    <script>
        var wow = new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: false,
            live: true
        });
        wow.init();
        // 猜你喜欢的数据
        var love_datas = [  
            [{
                    'img': 'love28.jpg',
                    'desctxt': '女童连衣裙<br>小童夏装儿童裙子纯棉',
                    'price': '345'
                },
                {
                    'img': 'love5.jpg',
                    'desctxt': '三星<br>（G5500）移动联',
                    'price': '3999'
                },
                {
                    'img': 'love29.jpg',
                    'desctxt': '网件WiFi6 RBK752 组合速率 ,千兆路由器',
                    'price': '600'
                },
                {
                    'img': 'love30.jpg',
                    'desctxt': '家香味 传承土榨<br> 压榨一级花生油6.18L',
                    'price': '200'
                },
                {
                    'img': 'love2.jpg',
                    'desctxt': ' 30CM炒锅不粘<br>锅NWG8330E电磁炉炒',
                    'price': '344'
                },
                {
                    'img': 'love1.jpg',
                    'desctxt': '阳光美包新款单肩包女<br>包时尚子母包四件套女',
                    'price': '233'
                }
            ],
            [{
                    'img': 'love27.jpg',
                    'desctxt': '碧水源净水器<br>家用直饮纳滤净水机',
                    'price': '799'
                },
                {
                    'img': 'love15.jpg',
                    'desctxt': '办公网络打印秒杀<br>专场部分爆款直降700',
                    'price': '1599'
                },
                {
                    'img': 'love14.jpg',
                    'desctxt': '圣雅罗999银项链<br>女款锁骨链时尚学生',
                    'price': '4000'
                },
                {
                    'img': 'love13.jpg',
                    'desctxt': '清风抽纸纸巾<br>整箱24包金装原木3层',
                    'price': '47'
                },
                {
                    'img': 'love12.jpg',
                    'desctxt': 'go猫粮 九种肉<br> 8磅 天然无谷全猫粮',
                    'price': '432'
                },
                {
                    'img': 'love11.jpg',
                    'desctxt': ' OPPO Reno6 pro 手机<br> 新品5G游戏手机',
                    'price': '6777'
                }
            ],
            [{
                    'img': 'love26.jpg',
                    'desctxt': '男士短袖保罗衫<br>中年夏季休闲POLO衫',
                    'price': '322'
                },
                {
                    'img': 'love25.jpg',
                    'desctxt': '威顿小绿表<br>女士手表商务腕表女',
                    'price': '690'
                },
                {
                    'img': 'love24.jpg',
                    'desctxt': 'realme 真我GT<br> 骁龙888 120Hz屏幕',
                    'price': '5009'
                },
                {
                    'img': 'love23.jpg',
                    'desctxt': '坚果 R2<br> 8GB+256GB浅黑色 1亿像素',
                    'price': '4599'
                },
                {
                    'img': 'love22.jpg',
                    'desctxt': 'vivox60<br> 5G手机全网通 5nm旗舰芯片',
                    'price': '7999'
                },
                {
                    'img': 'love21.jpg',
                    'desctxt': '三星 5G手机<br> 骁龙865 1.08亿像素',
                    'price': '8099'
                }
            ],
            [{
                    'img': 'love13.jpg',
                    'desctxt': '清风抽纸纸巾<br>整箱24包金装原木3层',
                    'price': '90'
                },
                {
                    'img': 'love12.jpg',
                    'desctxt': 'go猫粮 九种肉<br> 8磅 天然无谷全猫粮',
                    'price': '105'
                },
                {
                    'img': 'love11.jpg',
                    'desctxt': ' OPPO Reno6 pro 手机<br> 新品5G游戏手机',
                    'price': '3799'
                },
                {
                    'img': 'love25.jpg',
                    'desctxt': '威顿小绿表<br>女士手表商务腕表女',
                    'price': '3087'
                },
                {
                    'img': 'love24.jpg',
                    'desctxt': 'realme 真我GT<br> 骁龙888 120Hz屏幕',
                    'price': '3452'
                },
                {
                    'img': 'love23.jpg',
                    'desctxt': '坚果 R2<br> 8GB+256GB浅黑色 1亿像素',
                    'price': '6790'
                },
            ]
        ];
        // 封装一个节流函数
        function throttle(fn, delay) {
            let timer = null;
            return function (...args) {
                let context = this;
                if (!timer) {
                    fn.apply(context, args) //将函数放在这里，那么节流第一次就执行。之后每个一段时间生效一次
                    timer = setTimeout(() => {
                        // fn.apply(context, args)//将函数放在这里，那么第一次也是需要在某段时间后执行
                        timer = null
                    }, delay);
                }
            }
        }
        // 获取视口的宽高
        function viewWidthHeight() {
            return {
                w: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                h: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
            }
        }
        // 封装动画函数

        window.addEventListener('load', function () {
            var returntop = document.querySelector(".returntop")
            var fresh = document.querySelector('.icon-shuaxin')
            var lists_ul = document.querySelector(".lists_ul")
            // 获取电梯层离顶部的距离
            var floorone = document.querySelector("#floorone").offsetTop
            var floortwo = document.querySelector("#floortwo").offsetTop
            var floorthree = document.querySelector("#floorthree").offsetTop
            var floortoday = document.querySelector(".content_bottom").offsetTop;
            // 获取导航栏
            var floo_arr = [floortoday, floorone, floortwo, floorthree]
            var nav_bar = document.querySelector(".nav_bar")
            var nav_bar_ul = nav_bar.children;
            var nav_bar_arr = nav_bar_ul[0].children;
            // 轮播图js(用jq编写，不想用原生js了)
            // 将点点点用js生成
            for (let k = 0; k < $(".banner_ul li").length; k++) {
                let newli = '<li data-index = ' + k + '></li>'
                if (k == 0) {
                    newli = "<li class='current' data-index = 0></li>"
                }
                $(".banner ol").append(newli)
                // $(".banner ol").append($('<li data-index = '+k+'></li>'))
            }
            // 想要无缝滚动，那么必须将第一张图追加到最后面
            $(".banner_ul").append($(".banner_ul li:eq(0)").clone(true))

            // 当鼠标挪上去，显示左右按钮
            $(".banner").mouseenter(function () {
                $(".btn_right,.btn_left").fadeIn()
                clearInterval(timer)
                timer = null;
            })
            $(".banner").mouseleave(function () {
                $(".btn_right,.btn_left").fadeOut()
                timer = setInterval(() => {
                    $(".btn_right").click()
                }, 2000);
            })
            // 左右按钮添加点击事件
            var bannerindex = 0;
            var bannerlen = $(".banner_ul li").length;
            var bannerwidth = $(".banner").width()
            $(".btn_right").on('click', function () {
                if (bannerindex == bannerlen - 1) {
                    bannerindex = 0;

                    $(".banner_ul").css({
                        left: '0'
                    })
                }
                bannerindex++;
                if (bannerindex == bannerlen - 1) {
                    $(".banner_ol li").eq(0).addClass('current').siblings('li').removeClass(
                        'current');
                } else {
                    $(".banner_ol li").eq(bannerindex).addClass('current').siblings('li').removeClass(
                        'current')
                }

                var distance = bannerindex * bannerwidth
                $(".banner_ul").stop().animate({
                    left: '' + -distance + 'px'
                })
            })
            $(".btn_left").on('click', function () {
                if (bannerindex == 0) {
                    bannerindex = bannerlen - 1;
                    var distance = bannerindex * bannerwidth;
                    $(".banner_ul").css({
                        left: '' + -distance + 'px'
                    })
                }
                bannerindex--;
                $(".banner_ol li").eq(bannerindex).addClass('current').siblings('li').removeClass(
                    'current')

                var distance = bannerindex * bannerwidth;
                $(".banner_ul").stop().animate({
                    left: '' + -distance + 'px'
                })
            })

            // 通过点点点控制轮播
            $('.banner_ol').on('click', $('.banner_ol li'), function (e) {
                console.log(this) //ol

                console.log(e.currentTarget) //ol
                console.log(e.target) //
                $(e.target).addClass('current').siblings('li').removeClass('current')
                let ol_index = $(e.target).attr('data-index')
                bannerindex = ol_index
                console.log(ol_index)
                let distance = ol_index * bannerwidth;
                $(".banner_ul").stop().animate({
                    left: '' + -distance + 'px'
                })
            })



            // 给导航条做点击事件。
            for (let j = 0; j < nav_bar_arr.length; j++) {
                nav_bar_arr[j].addEventListener('click', function () {
                    // 这办法太生硬了，直接跳到目的地。
                    // document.documentElement.scrollTop = floo_arr[j]
                    // 错误代码，还不报错。jq方法应该用jq对象。
                    // document.documentElement.animate({'scrollTop':floo_arr[j]},1000)
                    $('html,body').stop().animate({
                        'scrollTop': floo_arr[j]
                    }, 1000)
                })
            }
            // 自动轮播加个计时器
            var timer = setInterval(() => {
                $(".btn_right").click()
            }, 2000);
            // 记录上一次随机数的值，
            var prevnum = 0;
            // 给window添加一个滚动条事件
            window.addEventListener('scroll', function () {
                // 页面被卷去的头部
                var windowY = window.pageYOffset || document.documentElement.scrollTop
                // 当页面到达今日推荐，将导航栏的绝对定位改成固定定位
                if (windowY >= floortoday) {
                    if (nav_bar.style.position == 'absolute') {
                        nav_bar.style.position = 'fixed';
                        nav_bar.style.top = '0px';
                        setTimeout(() => {
                            nav_bar.style.transition = 'all 1s';
                            nav_bar.style.position = 'fixed';
                            nav_bar.style.top = 60 + 'px';
                        }, 100);
                    } else {
                        nav_bar.style.transition = 'all 1s';
                        nav_bar.style.position = 'fixed';
                        nav_bar.style.top = 60 + 'px';
                    }
                } else {
                    nav_bar.style.transition = 'none';
                    nav_bar.style.top = '678px';
                    nav_bar.style.position = 'absolute';
                }
                for (let i = 0; i < floo_arr.length; i++) {
                    if (windowY + 100 >= floo_arr[i]) {
                        nav_bar_ul[0].querySelector("li.currentnav").classList.remove("currentnav")
                        nav_bar_arr[i].classList.add('currentnav')
                    }
                }
                // 滚动条到达手机通讯，那么返回顶部弹出
                window.pageYOffset >= floo_arr[2] ? $(".returntop").slideDown() : $(".returntop")
                    .slideUp()
                // if(window.pageYOffset >= floo_arr[2]){
                //     // returntop.style.display = 'block';
                //     $(".returntop").slideDown()

                // }else{
                //     $(".returntop").slideUp()
                //     // returntop.style.display = 'none';
                // }


            })
            // 给返回顶部添加点击事件
            $(".returntop").on('click', function () {
                $('html,body').stop().animate({
                    'scrollTop': 0
                }, 1500)
            })
            // 给刷新按钮添加点击事件，让按钮旋转和改变颜色。
            fresh.addEventListener('click', function () {
                this.style.transition = ' all 2s';
                this.style.transform = 'rotate(360deg)'
                this.style.color = 'red'
            })
            //  等刷新按钮的过渡结束后进行样式复原,并且请求数据。
            fresh.addEventListener('transitionend', function () {
                this.style.transition = 'none';
                this.style.transform = 'rotate(0deg)'
                this.style.color = '#666'
                var lidoms = '';
                // 这里的随机数不能和上一次生成的一样，如果一样，在随机生成
                let index = Math.floor(Math.random() * 4);
                while (index == prevnum) {
                    index = Math.floor(Math.random() * 4)
                }
                //      <img src="C:\Users\86187\Desktop\importantTest\pinshopping\premium-shopping\upload\love\love1.jpg" alt="">
                // <img src="C:\Users\86187\Desktop\importantTest\pinshopping\premium-shopping\upload\love\love11.jpg" alt="">
                prevnum = index;
                let newarr = love_datas[prevnum]
                for (let i = 0; i < newarr.length; i++) {
                    lidoms += `<li class="product">
                                <a href="javascript">
                                <div class="productimg"><img src="./upload/love/${newarr[i].img}" alt=""></div>
                                <div class="desc">
                                <p>${newarr[i].desctxt}</p>
                                <p><span class="font14">￥</span><i>${newarr[i].price}</i></p>
                                </div>
                                </a>
                            </li>`
                }
                lists_ul.innerHTML = lidoms;
            })
            setInterval(() => {
                fresh.click()
            }, 5000);
        })
    </script>

</body>

</html>